<template>
	<view class="wrap">
		<u-navbar title="基金" :background="background" back-icon-color="#fff" back-icon-size="36" title-color="#fff"
			title-size="34" :border-bottom="false">
			<view slot="right" class="slot-right">
				<button type="default" class="btn">
					<u-icon name="question-circle" size="36" color="#fff"></u-icon>
				</button>
			</view>
		</u-navbar>
		<view class="content">
			<view class="ui-box">
				<view class="ui-body">
					<view class="ui-flex">
						<view class="ui-hold">总金额(元)</view>
						<u-icon name="eye" size="28" color="#fff"></u-icon>
					</view>
					<view class="ui-flex ui-more">
						<view class="ui-number">0.00</view>
					</view>
					<view class="ui-data">
						<view class="ui-data__item">
							<view class="ui-data__label">昨日收益(元)</view>
							<view class="ui-data__val">0.00</view>
						</view>
						<view class="ui-data__item">
							<view class="ui-data__label">持有收益(元)</view>
							<view class="ui-data__val">--</view>
						</view>
						<view class="ui-data__item">
							<view class="ui-data__label">累计收益(元)</view>
							<view class="ui-data__val">0.00</view>
						</view>
					</view>
				</view>
			    <view class="fuli">领新人福利</view>
			</view>
			<view class="ui-grid">
				<u-grid :col="3" :border="false">
					<u-grid-item>
						<image src="../../static/uview/images/ui-1.png" class="icon" mode=""></image>
						<view class="grid-text">收益明细</view>
					</u-grid-item>
					<u-grid-item>
						<image src="../../static/uview/images/ui-2.png" class="icon" mode=""></image>
						<view class="grid-text">交易记录</view>
					</u-grid-item>
					<u-grid-item>
						<image src="../../static/uview/images/ui-3.png" class="icon" mode=""></image>
						<view class="grid-text">我的定投</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="follow-card">
				<view class="title">关注<text>新能源+光伏+电子</text></view>
				<view class="follow-link">
					<view class="follow-sale">年度重磅新基正式开售</view>
					<view class="follow-go">GO<u-icon name="arrow-right" size="24" color="#fff"></u-icon>
					</view>
				</view>
			</view>
			<view class="market">
				<view class="market-empty">
					<image src="../../static/uview/images/ants.png" class="icon" mode=""></image>
					<view class="to-see flex-center">
						<text class="text">去基金市场看看</text>
						<u-icon name="arrow-right" size="24" color="#919191"></u-icon>
					</view>
				</view>
			</view>
			<view class="ui-footer">
				<view class="ui-footer-company">基金销售服务由蚂蚁(杭州)基金销售有限公司提供</view>
				<view class="ui-footer-tip">本页面非任何法律文件，收益数据仅供参考。过往业绩不预示未来表现，市场有风险，投资需谨慎。</view>
				<u-divider color="#cbcbcb" half-width="96" border-color="#e1e1e1" bg-color="" fontSize="24">该页面由蚂蚁财富平台设计</u-divider>
			</view>
		</view>
		<u-tabbar v-model="current" inactive-color="#868686" active-color="#3270f5" :list="list"></u-tabbar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [{
					iconPath: "../../static/uview/images/j1.png",
					selectedIconPath: "../../static/uview/images/j1_on.png",
					text: '市场',
					pagePath: '/pages/fund/index',
				}, {
					iconPath: "../../static/uview/images/j3.png",
					selectedIconPath: "../../static/uview/images/j3_on.png",
					text: '自选',
					pagePath: '/pages/fund/optional',
				}, {
					iconPath: "../../static/uview/images/j2.png",
					selectedIconPath: "../../static/uview/images/j2_on.png",
					text: '持有',
					pagePath: '/pages/fund/hold',
				}, ],
				current: 0,
				background: {
					backgroundColor: '#3476fe'
				}
			}
		},
		computed: {},
		onShow() {},
		methods: {}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}

	.slot-right {
		padding-right: 30rpx;

		.btn {
			display: inline-block;
			background-color: transparent;
			height: 64rpx;
			padding: 0;
			line-height: 1.8;
			margin-left: 30rpx;
			vertical-align: middle;
		}
	}


	.content {
		padding: 20rpx 30rpx;
		position: relative;
	}

	.content::after {
		position: absolute;
		content: '';
		width: 140%;
		height: 460rpx;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #3476fe;
	}

	.ui-box {
		border-radius: 16rpx;
		padding: 0 30rpx;
		position: relative;
		z-index: 11;
	}

	.ui-body {
		padding: 40rpx 0 0;
	}

	.ui-hold {
		font-size: 24rpx;
		color: #fff;
		opacity: 0.5;
		text-align: center;
		margin-right: 20rpx;
	}

	.ui-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ui-number {
		font-size: 60rpx;
		color: #fff;
	}

	.ui-value {
		font-size: 24rpx;
		color: #575757;
		margin-right: 10rpx;

		text {
			color: #cd921f;
			font-size: 28rpx;
			padding: 0 10rpx;
		}
	}


	.ui-more {
		margin: 14rpx 0;
	}


	.ui-data {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.ui-data__item {
			padding: 0 16rpx;
			text-align: center;
			line-height: 50rpx;

			.ui-data__label {
				color: #fff;
				font-size: 26rpx;
				opacity: 0.5;
			}

			.ui-data__val {
				color: #fff;
				font-size: 30rpx;
			}
		}
	}

	.follow-card {
		padding: 40rpx 40rpx 40rpx 20rpx;
		border-radius: 12rpx;
		line-height: 1.2;
		background: url(../../static/uview/images/follow-bg1.png) no-repeat right 30rpx center #fff;
		background-size: 170rpx 150rpx;
		margin-bottom: 30rpx;

		.title {
			font-size: 34rpx;
			color: #2f2f2f;
			margin-bottom: 18rpx;

			text {
				color: #ed7731;
			}
		}

		.follow-link {
			display: flex;
			align-items: center;
			margin-right: 14rpx;
		}

		.follow-sale {
			font-size: 28rpx;
			color: #a0a0a0;
			margin-right: 16rpx;
		}

		.follow-go {
			background-color: #ee7a35;
			color: #fff;
			font-size: 20rpx;
			border-radius: 15rpx;
			line-height: 30rpx;
			height: 30rpx;
			padding: 0 14rpx;
		}
	}
	
	.ui-grid{
		background-color: #fff;
		position: relative;
		z-index: 11;
		margin-bottom: 24rpx;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 10rpx 0;
		
		.icon{
			width: 44rpx;
			height: 44rpx;
			display: block;
		}
		.grid-text{
			font-size: 24rpx;
			color: #262626;
			margin-top: 20rpx;
		}
	}
	
	.ui-footer{
		font-size: 24rpx;
		line-height: 36rpx;
		text-align: center;
		padding-bottom: 30rpx;
		.ui-footer-company{
			color: #999999;
		}
		
		.ui-footer-tip{
			color: #d1d1d1;
			margin: 6rpx 0;
		}
	}
	
	.market{
		background-color: #fff;
		border-radius: 8rpx;
		min-height: 450rpx;
		margin-bottom: 30rpx;
		position: relative;
		
		.market-empty{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-45%);
			
			.icon{
				width: 150rpx;
				height: 150rpx;
				display: block;
				margin: 0 auto;
			}
			
			.to-see{
				margin-top: 20rpx;
				.text{
					font-size: 24rpx;
					color: #7c7c7c;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.fuli{
		font-size: 24rpx;
		color: #fff;
		padding: 0 20rpx;
		line-height: 48rpx;
		border-radius: 24rpx 0 0 24rpx;
		height: 48rpx;
		position: absolute;
		right: -30rpx;
		top: 36rpx;
		background-color: rgba(0,0,0,0.05);
	}
</style>
